<template>
  <view class="page home-bg">
    <view class="" style="position: relative">
      <u-swiper
        :list="list1"
        indicator
        indicatorMode="line"
        keyName="image"
        circular
        class=" "
        height="200"
        radius="0"
        @click="getSwiper"
      >
      </u-swiper>
      <view class="nav-bd content-p" style="position: absolute; bottom: -35rpx">
        <view
          class="flex-row justify-bw mt30"
          style="
            background-color: #ffffff;
            border-radius: 20rpx;
            padding: 25rpx 20rpx;
            width: 100%;
          "
        >
          <view class="nav-bd-item" @click="onClickItem(0)">
            <text :class="current == 0 ? 'text-t2' : 'text-t1'">综合排序</text>
            <image
              v-show="current == 0"
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844598500548205.png"
              class="image center"
              style="width: 30%; height: 30%"
            />
          </view>
          <view class="nav-bd-item" @click="onClickItem(1)">
            <text :class="current == 1 ? 'text-t2' : 'text-t1'">价格</text>
            <image
              v-show="current == 1"
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844598500548205.png"
              class="image center"
              style="width: 30%; height: 30%"
            />
          </view>
          <view class="nav-bd-item" @click="onClickItem(2)">
            <text :class="current == 2 ? 'text-t2' : 'text-t1'">销量</text>
            <image
              v-show="current == 2"
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844598500548205.png"
              class="image center"
              style="width: 30%; height: 30%"
            />
          </view>
          <view class="nav-bd-item" @click="onClickItem(3)">
            <text :class="current == 3 ? 'text-t2' : 'text-t1'">好评度</text>
            <image
              v-show="current == 3"
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844598500548205.png"
              class="image center"
              style="width: 30%; height: 30%"
            />
          </view>
        </view>
      </view>
    </view>
    <view style="height: 40rpx"></view>
    <view class="product-wrapper content-p">
      <u-skeleton rows="10" :loading="loading" :title="false" rowsHeight="120">
      </u-skeleton>
      <navigator
        class="product-item flex-row"
        :key="i"
        v-for="(item, i) in productlList"
        :url="`../details/details?id=${item.id}`"
      >
        <view class="left-section flex-col">
          <view class="text-wrapper flex-col">
            <u--image
              :showLoading="true"
              :src="item.cover"
              width=" 216rpx"
              height="182rpx"
              radius="4"
              :fade="true"
              duration="450"
              :loadingIcon="ladImg"
            ></u--image>
            <text class="text_6">{{ item.label }}</text>
          </view>
        </view>
        <view class="right-group flex-col">
          <view class="flex-row justify-bw">
            <text class="text_8">{{ item.name }}</text>
            <text class="text_10">销量{{ item.sales }}</text>
          </view>
          <view class="group_7 flex-row">
            <view
              class="left-text-wrapper flex-col items-center"
              v-if="item.coupon"
            >
              <text>领券立减</text>
            </view>
            <view
              class="right-text-wrapper flex-col items-center"
              v-if="item.discount"
            >
              <text>限时折扣</text>
            </view>
          </view>
          <view class="group_8 flex-row">
            <image
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844603777503649.png"
              class="image_5"
            />
            <text class="text_14">时长{{ item.duration }}分钟</text>
          </view>
          <view class="group_9 flex-row">
            <view class="left-group">
              <text class="text_16">￥</text>
              <text class="text_18 price-font">{{ item.price }}</text>
            </view>
            <view class="center-group flex-col">
              <view class="group_10">
                <text class="text_20">￥</text>
                <text class="text_22 price-font1">{{
                  item.original_price
                }}</text>
              </view>
              <view class="divider"> </view>
            </view>
            <view class="right-text-wrapper_1 flex-col items-center">
              <text>立即下单</text>
            </view>
          </view>
        </view>
      </navigator>
    </view>
    <u-overlay :show="show_code">
      <view class="warp">
        <image :src="follow" mode="widthFix" style="width: 550rpx"></image>
      </view>
    </u-overlay>
    <u-overlay :show="show_q" @click="show_q = false">
      <view class="warp">
        <image
          :src="couponImg"
          mode="widthFix"
          style="width: 550rpx"
          @click="getcoupon"
        ></image>
      </view>
    </u-overlay>
  </view>
</template>

<script>
import tmSkeleton from "@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue";
import amapchoose from "@/components/amap-choose/amap-choose.vue";
import base from "@/config/baseUrl";
export default {
  components: {
    tmSkeleton,
    amapchoose,
  },
  data() {
    return {
      ladImg:
        "https://ryjdshop.oss-cn-beijing.aliyuncs.com/admin/202210/202210291824180187349.png",
      base: base,
      show_q: false,
      title: "",
      show: false,
      city: "北京市",
      weather: {
        type: "",
        low: "",
        high: "",
        date: "",
      },
      bgColor: {
        backgroundImage: "linear-gradient(to right, #31D081,#18B567)",
      },
      list1: [],
      page: 1,
      current: 0,
      total: null,
      productlList: [],
      loading: true,
      src: "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844604317986283.png",
      // "113.012546,28.199271"
      latitude: 113.012546,
      longitude: 28.199271,
      initLocation: "",
      is_wxapp: true,
      show_code: false,
      name: "",
      wx_code: "",
      pid: "",
      tpid: "",
      showQuoun: false,
      follow: "",
      couponImg: "",
      is_coupon: 0,
    };
  },
  computed: {},
  async onLoad(options) {
    await this.getConfig();

    this.initLocation = `${this.longitude},${this.latitude}`;

    uni.$u.sleep(500).then(() => {
      this.init();
      this.loading = false;
    });
    // 获取当前定位地址
    let address = uni.getStorageSync("address_info");
    if (address) {
      this.city = address.district ? address.district : address.city;
      this.latitude = address.latitude;
      this.longitude = address.longitude;
      this.initLocation = `${this.latitude},${this.longitude}`;
    } else {
      this.getLat();
    }
    if (options.pid) {
      this.show_q = false;
      this.show_code = true;
      this.showQuoun = true;
      uni.setStorageSync("pid", options.pid);
    }
    if (options.tpid) {
      this.show_q = false;
      this.show_code = true;
      this.showQuoun = true;
      uni.setStorageSync("tpid", options.tpid);
    }
  },
  onReady() {},
  onShow() {
    if (uni.getStorageSync("userInfo")) {
      this.getInfo();
    } else {
      if (!this.showQuoun) {
        //this.show_q = true
      }
    }
  },
  methods: {
    getInfo() {
      this.$http.post("api/user/userInfo").then((res) => {
        this.new_people = res.new_people;
        if (res.new_people == 0 && !this.showQuoun && this.is_coupon == 1) {
          this.show_q = true;
        } else {
          this.show_q = false;
        }
      });
    },
    getcoupon() {
      this.$http
        .post("api/coupon/newPeopleReceive")
        .then((res) => {
          uni.showToast({
            title: "领取成功！",
          });
          this.show_q = false;
        })
        .catch((err) => {
          this.show_q = false;
        });
    },
    getSwiper(e) {
      if (this.list1[e].url_type == 0) {
        // #ifdef H5
        location.href = this.list1[e].url;
        // #endif
      } else {
        uni.navigateTo({
          url: this.list1[e].url,
        });
      }
    },
    getConfig() {
      this.$http.post("api/index/shareConfig").then((res) => {
        const {
          wx_code,
          name,
          share_title,
          share_content,
          logo,
          follow,
          couponImg,
          is_coupon,
        } = res;
        this.follow = follow;
        this.couponImg = couponImg;
        this.is_coupon = is_coupon;
        this.wx_code = wx_code;
      });
    },
    getLat() {
      uni.showLoading({
        title: "获取位置",
      });
      uni.getLocation({
        geocode: true,
        success: (res) => {
          uni.hideLoading();
          let { latitude, longitude, address } = res;
          this.latitude = latitude;
          this.longitude = longitude;

          this.initLocation = `${this.longitude},${this.latitude}`;

          // #ifdef H5
          this.$http
            .post("api/wechat/getMapAddress", {
              location: `${latitude},${longitude}`,
            })
            .then((res) => {
              let { ad_info } = res.result;
              let { location } = ad_info;
              ad_info.latitude = location.lat;
              ad_info.longitude = location.lng;
              uni.setStorageSync("address_info", ad_info);
              this.city = ad_info.district ? ad_info.district : ad_info.city;
            });
          return;
          // #endif

          address.longitude = longitude;
          address.latitude = latitude;
          uni.setStorage({
            key: "address_info",
            data: address,
            success: () => {
              this.city = address.district ? address.district : address.city;
            },
          });
        },
        fail: (err) => {},
      });
    },

    // 获取轮播图
    getBanner() {
      this.$http.post("api/index/index").then((res) => {
        this.list1 = res;
      });
    },
    // 获取首页列表数据
    getList() {
      this.$http
        .post("api/index/service", {
          page: this.page,
          orderBy: this.current,
        })
        .then((res) => {
          let { list, total } = res;
          this.productlList.push(...list);
          this.total = total;
        });
    },
    init() {
      this.getBanner();
      this.getList();
    },
    onClickItem(e) {
      if (this.current !== e) {
        this.current = e;
        this.page = 1;
        this.productlList = [];
        this.total = null;
        this.getList();
      }
    },
    placeChoose(e) {
      let reg = /.+?(省|市|镇|自治区|自治州|县|区)/g;
      let { address } = e;
      let arr = address.match(reg);
      this.city = arr[1];
      uni.setStorageSync(
        "address_info",
        Object.assign(e, {
          city: this.city,
        })
      );
      this.show = false;
    },
    changeShow(e) {
      this.show = e;
    },
    showCity() {
      // #ifdef H5
      // 去掉
      this.initLocation = `${this.longitude},${this.latitude}`;
      this.show = true;
      return;
      // #endif
    },
  },
  onNavigationBarButtonTap(e) {
    this.$refs.mpvueCityPicker.show();
  },
  onPullDownRefresh() {
    let _self = this;
    setTimeout(() => {
      uni.stopPullDownRefresh(); //停止当前页面下拉刷新
      this.page = 1;
      this.productlList = [];
      this.total = null;
      this.init();
    }, 1000);
  },
};
</script>

<style lang="scss">
.warp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.home-bg {
  .head-warpper {
    //position: fixed;
  }

  .nav-head {
    font-size: 30rpx;
    font-weight: 380;
    display: flex;

    view {
      display: flex;
      flex-direction: row;
      align-items: center;
      color: white;
    }

    .flex {
      flex: 1;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;

      text {
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }
    }

    .flex_2 {
      flex: 2;
    }
  }

  .nav-bd {
    width: 100%;

    display: flex;
    justify-content: space-around;

    .nav-bd-item {
      text-align: center;
    }

    .text-t1 {
      font-size: 30rpx;
    }

    .text-t2 {
      font-size: 35rpx;
      font-weight: bold;
    }
  }

  .product-wrapper {
    //#ifdef APP-PLUS
    padding-bottom: 30rpx;
    //#endif
    .product-item {
      padding: 16rpx 22rpx 24rpx 24rpx;
      background-color: rgb(255, 255, 255);
      border-radius: 28rpx;
      margin: 20rpx 0;

      .left-section {
        //padding-top: 140rpx;
        color: rgb(255, 255, 255);
        font-size: 24rpx;
        line-height: 34rpx;
        white-space: nowrap;
        border-radius: 12rpx;
        //background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844604317986283.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 216rpx;
        height: 182rpx;

        .text-wrapper {
          padding: 13rpx 0 0 0;
          position: relative;

          .text_6 {
            text-align: center;
            width: 216rpx;
            position: absolute;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.36);
            border-radius: 0px 0px 12rpx 12rpx;
            //margin: 0 6rpx;
          }
        }
      }

      .right-group {
        margin-left: 24rpx;
        flex: 1 1 auto;

        .group_7 {
          margin-top: 8rpx;

          .left-text-wrapper {
            padding: 4rpx 0;
            color: rgb(255, 255, 255);
            font-size: 20rpx;
            line-height: 28rpx;
            white-space: nowrap;
            background-color: rgb(243, 151, 53);
            border-radius: 8rpx;
            width: 104rpx;
            height: 36rpx;
            text-align: center;
          }

          .right-text-wrapper {
            margin-left: 6rpx;
            padding: 2rpx 0;
            color: rgb(243, 151, 53);
            font-size: 20rpx;
            line-height: 28rpx;
            white-space: nowrap;
            border-radius: 8rpx;
            width: 104rpx;
            height: 36rpx;
            border: solid 2rpx rgb(243, 151, 53);
            text-align: center;
          }
        }

        .group_8 {
          margin-top: 8rpx;
          color: rgb(102, 102, 102);
          font-size: 24rpx;
          line-height: 34rpx;
          white-space: nowrap;

          .image_5 {
            width: 32rpx;
            height: 32rpx;
          }

          .text_14 {
            margin-left: 4rpx;
          }
        }

        .group_9 {
          margin-top: 16rpx;

          .left-group {
            margin-top: 14rpx;
            white-space: nowrap;
            height: 44rpx;

            .text_16 {
              color: rgb(255, 74, 74);
              font-size: 24rpx;
              line-height: 28rpx;
            }

            .text_18 {
              font-family: Price-Bold;
              color: rgb(255, 74, 74);
              font-size: 36rpx;
              line-height: 44rpx;
            }
          }

          .center-group {
            margin-left: 4rpx;
            margin-top: 20rpx;
            position: relative;

            .group_10 {
              line-height: 28rpx;
              white-space: nowrap;

              .text_20 {
                color: rgb(153, 153, 153);
                font-size: 24rpx;
                line-height: 28rpx;
              }

              .text_22 {
                color: rgb(153, 153, 153);
                font-size: 24rpx;
                line-height: 28rpx;
              }
            }

            .divider {
              background-color: rgb(151, 151, 151);
              width: 88rpx;
              height: 2rpx;
              position: absolute;
              left: 2rpx;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }

          .right-text-wrapper_1 {
            margin-left: 40rpx;
            margin-top: 6rpx;
            padding: 4rpx 0 2rpx;
            color: rgb(255, 255, 255);
            font-size: 24rpx;
            line-height: 34rpx;
            position: absolute;
            right: 60rpx;
            background-image: linear-gradient(
              112.4deg,
              rgb(53, 219, 160) 0%,
              rgb(53, 219, 160) -13.77%,
              rgb(24, 181, 103) 111.69%,
              rgb(24, 181, 103) 100%
            );
            border-radius: 20rpx;
            width: 128rpx;
            height: 40rpx;
            text-align: center;
          }
        }

        .text_8 {
          color: rgb(0, 0, 0);
          font-size: 32rpx;
          font-weight: 500;
          line-height: 44rpx;
          width: 300rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .text_10 {
          margin-bottom: 10rpx;
          color: rgb(153, 153, 153);
          font-size: 24rpx;
          line-height: 34rpx;
          white-space: nowrap;
          padding-right: 30rpx;
        }
      }
    }
  }
}
</style>
